<template>
  <div class="app-container">
    <div class="header">
      <el-steps
        :active="formatStepStatus(order.status)"
        finish-status="success"
        align-center
      >
        <el-step title="提交订单" :description="order.addTime || ''"></el-step>
        <el-step title="支付订单" :description="order.payTime || ''"></el-step>
        <el-step title="平台发货" description></el-step>
        <el-step
          title="确认收货"
          :description="order.finishTime || ''"
        ></el-step>
        <!-- <el-step title="完成评价" description></el-step> -->
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{ order.statusText }}</span>
        <!-- <el-button
          v-if="order.status == 1"
          style="margin-left: 30px"
          @click="CancelOrder"
          type="primary"
          size="mini"
          >取消订单</el-button
        > -->
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">购买用户ID</el-col>
          <el-col :span="6" class="table-cell-title">购买用户昵称</el-col>
          <!-- <el-col :span="6" class="table-cell-title">订单编号</el-col>
          <el-col :span="6" class="table-cell-title">订单名称</el-col> -->
          <el-col :span="6" class="table-cell-title">商家ID</el-col>
          <el-col :span="6" class="table-cell-title">商家名称</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{
            order.user ? order.user.userID : ""
          }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.user ? order.user.nickname : ""
          }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.masterID }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.masterName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">交易订单号</el-col>
          <el-col :span="6" class="table-cell-title">支付方式</el-col>
          <el-col :span="6" class="table-cell-title">购买用户手机号</el-col>
          <el-col :span="6" class="table-cell-title">备注</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell small" style="font-size: 12px">
            <el-popover
              placement="top-start"
              title="订单编号"
              width="200"
              trigger="hover"
              :content="order.tradeNo"
            >
              <span slot="reference">{{ order.tradeNo }}</span>
            </el-popover>
          </el-col>
          <el-col :span="6" class="table-cell">{{ order.payTypeText }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.user ? order.user.mobile : ""
          }}</el-col>
          <el-col :span="6" class="table-cell">
            <el-popover
              placement="top-start"
              title="备注"
              width="200"
              trigger="hover"
              :content="order.content"
            >
              <span slot="reference">{{ order.content }}</span>
            </el-popover>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-if="order.status == 3" class="table-cell-title"
            >核销码</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" v-if="order.status == 3" class="table-cell">{{
            order.verificationCode
          }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <el-col :span="6" class="table-cell-title">地区编号</el-col>
          <el-col :span="6" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ order.consignee }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.mobile }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.region }}</el-col>
          <el-col :span="6" class="table-cell">
            <el-popover
              placement="top-start"
              title="收货地址"
              width="200"
              trigger="hover"
              :content="order.address"
            >
              <span slot="reference">{{ order.address }}</span>
            </el-popover>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell-title">快递公司</el-col>
          <el-col :span="6" class="table-cell-title">快递单号</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{
            order.express_company
          }}</el-col>
          <el-col :span="6" class="table-cell">
            <el-popover
              placement="top-start"
              title="快递单号"
              width="200"
              trigger="hover"
              :content="order.express_no"
            >
              <span slot="reference">{{ order.express_no }}</span>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div
        style="margin-top: 20px"
        v-if="order.status == 4 || order.status == 5 || order.status == 6"
      >
        <span class="font-small">退款信息</span>
      </div>
      <div
        class="table-layout"
        v-if="order.status == 4 || order.status == 5 || order.status == 6"
      >
        <el-row>
          <el-col :span="8" class="table-cell-title">退款订单号</el-col>
          <el-col :span="8" class="table-cell-title">退款类型描述</el-col>
          <el-col :span="8" class="table-cell-title">退款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{
            order.refundtradeNo || "无"
          }}</el-col>
          <el-col :span="8" class="table-cell">{{
            order.refundPayTypeText || "无"
          }}</el-col>
          <el-col :span="8" class="table-cell">{{
            order.refundMoney || "无"
          }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.orderproduct"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.titleImg" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>产品名称：{{ scope.row.productName }}</p>
            <p>产品ID：{{ scope.row.productID }}</p>
          </template>
        </el-table-column>
        <el-table-column label="实际售价" width="120" align="center">
          <template slot-scope="scope">
            <p>单价：￥{{ scope.row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="积分" width="120" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.useIntegral }}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="商品返佣" width="120" align="center">
          <template slot-scope="scope">
            <p>单个返佣：￥{{ scope.row.cashback }}</p>
          </template>
        </el-table-column> -->
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            <span>￥{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          width="120"
          v-if="order.status == 2"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="afterSales(scope.$index, scope.row)"
              type="primary"
              size="mini"
              >售后退款</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div style="float: right; margin: 20px">
        合计：
        <span class="color-danger">￥{{ order.amount }}</span>
      </div>
      <div style="margin-top: 60px">
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">商品合计</el-col>
          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">￥{{ order.amount }}</el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{ order.amount }}</span>
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{ order.amount }}</span>
          </el-col>
        </el-row>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 30px">
        <el-button type="primary" @click="goBack">返回上一页</el-button>
      </div>
    </el-card>
    <el-dialog
      title="修改收货人信息"
      :append-to-body="true"
      :visible.sync="receiverDialogVisible"
      width="40%"
    >
      <el-form :model="receiverInfo" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input
            v-model="receiverInfo.consignee"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input
            v-model="receiverInfo.mobile"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input
            v-model="receiverInfo.postalCode"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <v-distpicker
            :province="receiverInfo.province"
            :city="receiverInfo.city"
            :area="receiverInfo.region"
            @selected="onSelectRegion"
          ></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input
            v-model="receiverInfo.address"
            type="textarea"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateReceiverInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 退款 -->
    <el-dialog
      title="售后操作"
      :append-to-body="true"
      top="200px"
      :visible.sync="refundVisible"
      width="30%"
    >
      <div class="refund-main">
        <!-- <el-button type="primary" @click="exchange">换货(补货)</el-button> -->
        <el-button type="primary" @click="refund">退货退款</el-button>
      </div>

      <span slot="footer" class="dialog-footer">
        <span style="float: left">提示:请选择售后类型进行下一步操作！</span>
        <el-button @click="refundVisible = false">返 回</el-button>
      </span>
      <el-dialog
        width="60%"
        :title="refundkey == 0 ? '退货退款' : '换货(补货)提交表'"
        :visible.sync="refundVisible1"
        append-to-body
      >
        <p style="margin-bottom: 10px">
          {{
            refundkey == 0 ? "请选择退货产品数量" : "请选择换货(补货)产品数量"
          }}
          (
          <span style="color: red">必选</span>):
        </p>
        <el-table ref="refundList" :data="refundList" style="width: 100%">
          <el-table-column
            prop="productName"
            align="center"
            label="产品名称"
          ></el-table-column>
          <el-table-column
            prop="marketPrice"
            align="center"
            label="市场价"
          ></el-table-column>
          <el-table-column
            prop="salePrice"
            align="center"
            label="销售价"
          ></el-table-column>
          <el-table-column prop="titleImg" align="center" label="图片">
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.titleImg"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="amount"
            align="center"
            label="总价"
          ></el-table-column>
          <el-table-column
            prop="count"
            align="center"
            label="用户购买数量"
          ></el-table-column>
          <el-table-column
            align="center"
            label="提示:输入金额不能大于产品总金额"
          >
            <el-table-column
              align="center"
              :label="refundkey == 0 ? '退货金额' : '换货(补货)金额'"
              width="200"
            >
              <template slot-scope="scope">
                <!-- <el-input-number v-model="scope.row.goodsmun" :min="0" :max="scope.row.count"></el-input-number> -->
                <el-input
                  type="number"
                  v-model="scope.row.goodsmun"
                  @input="
                    refundInput(
                      scope.row.goodsmun,
                      scope.row.amount,
                      scope.$index
                    )
                  "
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="margin: 20px 0"></div>
        <p style="margin-bottom: 10px">
          {{ refundkey == 0 ? "请输入退货理由" : "请输入换货(补货)理由" }}
          (
          <span style="color: red">可选</span>):
        </p>
        <el-radio-group v-model="refundtext">
          <el-radio :label="0">质量问题</el-radio>
          <el-radio :label="1">分拣原因（错发，漏发，少称）</el-radio>
          <el-radio :label="2">缺货</el-radio>
          <el-radio :label="3">其他</el-radio>
        </el-radio-group>
        <p style="margin-top: 20px">备注:</p>
        <el-input
          type="textarea"
          :rows="3"
          v-model="refundtext2"
          placeholder="请输入内容"
        ></el-input>
        <p style="margin-top: 20px">退货图片 :</p>
        <MoreUpload
          :XAction="uploadUrl"
          :compression="true"
          :XHeader="uploadHeader"
          :XMaxImg="5"
          :maximum="5120"
          v-model="refundList.media"
        ></MoreUpload>
        <div slot="footer" class="dialog-footer">
          <el-button @click="refundVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="refundSumbit">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog
        width="60%"
        title="确认提交"
        :visible.sync="refundVisible2"
        append-to-body
      >
        退换货产品：
        <el-table ref="refundList" :data="refundSumbitList" style="width: 100%">
          <el-table-column
            prop="productName"
            align="center"
            label="产品名称"
          ></el-table-column>
          <el-table-column
            prop="marketPrice"
            align="center"
            label="市场价"
          ></el-table-column>
          <el-table-column
            prop="salePrice"
            align="center"
            label="销售价"
          ></el-table-column>
          <el-table-column prop="titleImg" align="center" label="图片">
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.titleImg"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsmun"
            align="center"
            :label="refundkey == 0 ? '退货金额' : '换货(补货)金额'"
          ></el-table-column>
          <!-- <el-table-column prop="amount" align="center" :label="refundkey==0?'退货总计':'换货(补货)总计'">
            <template slot-scope="scope">
              <span>{{scope.row.salePrice*scope.row.goodsmun}}</span>
            </template>
          </el-table-column>-->
        </el-table>
        <p>退换货理由：</p>
        <span v-if="refundtext == 0">质量问题</span>
        <span v-if="refundtext == 1">分拣原因（错发，漏发，少称）</span>
        <span v-if="refundtext == 2">缺货</span>
        <span v-if="refundtext == 3">其他</span>
        <p>备注：</p>
        <p>{{ refundtext2 }}</p>
        <div v-if="refundList.media">
          <p>退换货图片：</p>
          <img
            style="width: 300px"
            v-for="(item, index) in refundList.media"
            :key="index"
            :src="item.src"
            alt
          />
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="refundVisible2 = false">取 消</el-button>
          <el-tooltip
            class="item"
            effect="dark"
            content="确认无误后点击确认"
            placement="top"
          >
            <el-button type="primary" @click="refundendSumbit">确 定</el-button>
          </el-tooltip>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import config from "../../../build/config";
export default {
  data() {
    return {
      order: {},
      addressList: {},
      receiverDialogVisible: false,
      receiverInfo: {
        orderID: "",
        consignee: "",
        address: "",
        mobile: "",
        province: "",
        city: "",
        region: "",
        postalCode: "",
      },
      //发货
      deliveryVisible: false,
      deliveryData: {},
      //查快递
      logisticsVisible: false,
      logisticsTradeNo: {},
      //退款
      refundVisible: false,
      refundVisible1: false,
      refundVisible2: false,
      refundList: [],
      refundkey: [],
      refundSumbitList: [],
      refundtext: [],
      refundtext2: "",
      refundtext3: "",
      masterlist: {},
      keys: "",
      abc: 0,
      uploadUrl: "",
      uploadHeader: {},
    };
  },
  created() {
    this.uploadUrl = config.baseUrl + "Index/upload";
    this.uploadHeader = { ApiAuth: sessionStorage.getItem("apiAuth") };
    this.getList();
  },
  watch: {
    $router: "getList",
  },
  methods: {
    CancelOrder() {
      this.$confirm("请确认用户需要取消订单？ 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post("ReachOrder/cancel", { tradeNo: this.order.tradeNo })
            .then((response) => {
              if (response.data.code === 1) {
                this.$message({
                  message: response.data.msg,
                  type: "success",
                });
                this.getList();
              }
            });
        })
        .catch(() => {});
    },
    refundInput(val, val2, val3) {
      if (
        this.refundList[val3].goodsmun != "" &&
        this.refundList[val3].goodsmun.substr(0, 1) == "."
      ) {
        this.refundList[val3].goodsmun = 0;
      }
      this.refundList[val3].goodsmun = this.refundList[val3].goodsmun.replace(
        /^0*(0\.|[1-9])/,
        "$1"
      ); //解决 粘贴不生效
      this.refundList[val3].goodsmun = this.refundList[val3].goodsmun.replace(
        /[^\d.]/g,
        ""
      ); //清除“数字”和“.”以外的字符
      this.refundList[val3].goodsmun = this.refundList[val3].goodsmun.replace(
        /\.{2,}/g,
        "."
      ); //只保留第一个. 清除多余的
      this.refundList[val3].goodsmun = this.refundList[val3].goodsmun
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.refundList[val3].goodsmun = this.refundList[val3].goodsmun.replace(
        /^(\-)*(\d+)\.(\d\d).*$/,
        "$1$2.$3"
      ); //只能输入两个小数
      if (
        this.refundList[val3].goodsmun.indexOf(".") < 0 &&
        this.refundList[val3].goodsmun != ""
      ) {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (
          this.refundList[val3].goodsmun.substr(0, 1) == "0" &&
          this.refundList[val3].goodsmun.length == 2
        ) {
          this.refundList[val3].goodsmun = this.refundList[
            val3
          ].goodsmun.substr(1, this.refundList[val3].goodsmun.length);
        }
      }
      if (parseFloat(val) > parseFloat(val2)) {
        this.refundList[val3].goodsmun = val2;
      }
    },
    /**
     * 修改用户收货地址
     */
    onSelectRegion(data) {
      this.receiverInfo.province = data.province.value;
      this.receiverInfo.city = data.city.value;
      this.receiverInfo.region = data.area.value;
    },
    editAddress() {
      this.receiverDialogVisible = true;
      this.receiverInfo.orderID = this.order.orderID;
      this.receiverInfo.consignee = this.order.addressContent.consignee;
      this.receiverInfo.address = this.order.addressContent.address;
      this.receiverInfo.mobile = this.order.addressContent.mobile;
      this.receiverInfo.province = this.order.addressContent.province;
      this.receiverInfo.city = this.order.addressContent.city;
      this.receiverInfo.region = this.order.addressContent.region;
      this.receiverInfo.postalCode = this.order.addressContent.postalCode;
    },
    handleUpdateReceiverInfo() {
      let self = this;
      axios
        .post("MallOrder/setAddress", self.receiverInfo)
        .then(function (response) {
          if (response.data.code === 1) {
            self.$message({
              message: response.data.msg,
              type: "success",
            });
            self.getList();
            self.receiverDialogVisible = false;
          } else {
            self.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        });
    },
    /**
     * 发货
     */
    delivery() {
      this.deliveryVisible = true;
      this.deliveryData = this.order.orderID;
    },
    hidden() {
      this.deliveryVisible = false;
      this.deliveryData = "";
      this.logisticsVisible = false;
      this.logisticsTradeNo = {};
      this.getList();
    },
    /**
     * 查询快递
     */
    expressInquiry() {
      this.logisticsVisible = true;
      this.logisticsTradeNo.orderID = this.order.orderID;
      this.logisticsTradeNo.tradeNo = this.order.tradeNo;
    },

    /**
     * 售后操作
     */

    afterSales(index, row) {
      // this.refundList = this.order.product;
      this.refundList = [];
      this.refundList.push(row);
      this.refundList.map((v, i) => {
        // v.goodsmun=0   刚开始这样赋值，不可行
        this.$set(v, "goodsmun", 0); //必须要这样赋值
        //这里使用循环赋值，避免又改需求
      });
      this.refundVisible = true;
    },
    numberChange(a) {},
    exchange() {
      this.refundVisible1 = true;
      this.refundkey = 1;
    },
    refund() {
      this.refundVisible1 = true;
      this.refundkey = "0";
    },
    refundendSumbit() {
      let self = this;
      let obj = {
        content: this.refundtext2,
        why: this.refundtext,
        img: this.refundList.media,
      };
      for (let i in this.refundSumbitList) {
        // obj["product"][this.refundSumbitList[i].productID] = JSON.stringify(
        //   this.refundSumbitList[i].goodsmun
        // );//这里是多个产品的格式
        obj["moeny"] = this.refundSumbitList[i].goodsmun;
        obj["pID"] = this.refundSumbitList[i].pID;
      }
      // obj.product = JSON.stringify(obj.product);
      axios.post("AfterSales/apply", obj).then(function (response) {
        if (response.data.code === 1) {
          self.$message({
            message: response.data.msg,
            type: "success",
            offset: 100,
          });
          self.refundVisible = false;
          self.refundVisible1 = false;
          self.refundVisible2 = false;
          self.getList();
        } else {
          self.$message({
            message: response.data.msg,
            type: "warning",
            offset: 100,
          });
        }
      });
    },
    refundSumbit() {
      this.refundtext3 = "";
      this.refundSumbitList = JSON.parse(JSON.stringify(this.refundList));
      for (let i in this.refundSumbitList) {
        this.refundSumbitList[i].goodsmun == 0
          ? this.refundSumbitList.splice(i, 1)
          : this.refundSumbitList[i];
      }
      for (let j in this.refundtext) {
        this.refundtext3 += this.refundtext[j] + ",";
      }
      if (this.refundtext2) {
        this.refundtext3 = this.refundtext3 + this.refundtext2;
      } else {
        this.refundtext3 = this.refundtext3.substring(
          0,
          this.refundtext3.length - 1
        );
      }
      if (this.refundSumbitList.length == 0) {
        this.$message({
          type: "error",
          message:
            "您必须选择需要" +
            (this.refundkey == 1 ? "换货" : "退货退款") +
            "的产品！",
          offset: 100,
        });
      } else {
        this.refundVisible2 = true;
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 基础数据处理
     */
    formatStepStatus(val) {
      if (val == -1 || val == -3 || val == 4) {
        return 1;
      } else if (val == 1) {
        return 2;
      } else if (val == 2) {
        return 3;
      } else if (val == 3) {
        return 4;
      }
    },
    getList() {
      let vm = this;
      axios
        .get("Order/detail", {
          params: { orderID: sessionStorage.getItem("order_details") },
        })
        .then(function (response) {
          let res = response.data;
          if (res.code === 1) {
            vm.order = res.data;
            // vm.addressList = res.data.addressContent;
          } else {
            if (res.code === -14) {
              vm.$store.commit("logout", vm);
              vm.$router.push({
                name: "login",
              });
            } else {
              vm.$message({
                message: res.msg,
                offset: 100,
                type: "error",
              });
            }
          }
        });
    },
  },
};
</script>
<style scoped>
.app-container {
  padding: 30px 100px 30px 100px;
}
.header {
  background: #fff;
  padding: 20px 10px 20px 10px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.color-danger {
  color: #f56c6c;
  font-size: 18px;
}
.small {
  font-size: 12px;
}
.refund-main {
  display: flex;
  justify-content: space-around;
}
</style>

